<template>
  <div class="codediv">
    <codemirror
        class="code"
        v-model="code"
        placeholder="Code gose here..."
        :style="{ height: '610px' ,textAlign: 'left'}"
        :autofocus="true"
        :indent-with-tab="true"
        :tabSize="2"
        :extensions="extensions"
    />
    <div class="testcase" @click="table = true">
      <el-button text  class="testcasespan">
        测试用例
      </el-button>
      <img class="testcaseimg" src="../image/测试用例.png">
    </div>

    <el-drawer
        v-model="table"
        title=""
        direction="rtl"
        size="50%"
    >

    </el-drawer>
  </div>
</template>

<script>
// import axios from "axios";
import {Codemirror} from "vue-codemirror";
import {javascript} from "@codemirror/lang-javascript";
import {oneDark} from "@codemirror/theme-one-dark";
import {java} from "@codemirror/lang-java";
import {EditorView} from "@codemirror/view";
import {ref} from "vue";

export default {
  name: "CodeMirror",
  components: {
    Codemirror,
  },
  data() {
    return {};
  },
  setup() {
    const code = ref(`
      <template>
        <div class="all">
          <div class="drag-main">
            <div id="twoBox" class="drag-two-box">
              <div id="menu" class="menu"><LeftMenu></LeftMenu></div>
              <div id="twoleft" class="drag-two-left"><ShowMarkDown></ShowMarkDown></div>
              <div id="tworesize" class="drag-two-resize">
                ⋮
              </div>
              <div id="tworight" class="drag-two-right"><CodeMirror></CodeMirror></div>
            </div>
          </div>
        </div>
      </template>`
    );
    let myTheme = EditorView.theme(
        {
          // 输入的字体颜色
          "&": {
            color: "#8fb2ed",
            backgroundColor: "#FFFFFF",
          },
          ".cm-content": {
            caretColor: "#2d76ef",
          },
          // 激活背景色
          ".cm-activeLine": {
            backgroundColor: "#red",
          },
          // 激活序列的背景色
          ".cm-activeLineGutter": {
            backgroundColor: "white",
          },
          //光标的颜色
          "&.cm-focused .cm-cursor": {
            borderLeftColor: "#94b5ea",
          },
          // 选中的状态
          "&.cm-focused .cm-selectionBackground, ::selection": {
            backgroundColor: "rgb(215,212,240)",
          },
          // 左侧侧边栏的颜色
          ".cm-gutters": {
            backgroundColor: "white",
            color: "green", //侧边栏文字颜色
            border: "none",
          },
        },
        {dark: true}
    );
    const extensions = [java(), myTheme];
    const table = ref(false)
    return {
      code,
      extensions,
      table
    };
  }
}

</script>

<style scoped>
html, body {
  height: 100%
}

.codediv {
  border: 1px solid RGB(230, 230, 230);
  height: 650px;
}

.testcase{
  height: 40px;
  width: 100%;
  background-color: RGB(246,247,249);
  display: flex;
  align-items: center;
  cursor: pointer;
}

.testcase:hover .testcasespan{
  color: #7dc5eb;
}

.testcasespan{
  margin-left: 3%;
  font-size: 15px;
  color: RGB(153,153,153);
}

.testcaseimg{
  height: 30px;
  width: 30px;
}
</style>
